import React, {Component} from "react";
// import TabNavigator from 'react-native-tab-navigator';
import {
    Text,
    Image,
    View,
    StyleSheet,
    ListView,
    TouchableHighlight,
} from 'react-native';
import ItemDetail from "./ItemDetail";
/**
 * 从网络获取数据，并展示到UI上
 */
export default class FetchNetDataComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: null
        };
    }

    //发起网络请求，获取数据
    fetchUserList() {
        const url = 'https://api.github.com/users/mralexgray/followers';
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
        fetch(url).then((response) => response.json())
            .then(
                (responseData) => this.setState({
                    dataSource: ds.cloneWithRows(responseData)
                })
            )
            .catch((error) => {
                console.log(error)
            })
    }

    //页面渲染完成后会主动回调该方法
    componentDidMount() {
        this.fetchUserList();
    }

    //绘制界面
    render() {

        //这里需要判断网络请求完成与否，如果dataSource为空时，会发生空指针
        if (this.state.dataSource) {
            return this.renderList();
        }
        return (
                <Text style={{textAlign: "center", fontSize: 16, padding: 20}}>加载中...</Text>
        )


    }

    renderList() {
        return (

            <ListView
                dataSource={this.state.dataSource}
                renderRow={
                    // (item) => this._renderItem(item)
                     this._renderItem.bind(this)
                }
                renderSeparator={this._renderSeparator}

            />
        )
    }

    //绘制展示数据的界面
    _renderItem(rowData,sectionID,rowID) {
        const { navigate } = this.props.navigation;
//         const { navigate } = this.props.navigation
// // =>
//         const { navigate: navigate } = this.props.navigation
// // =>
//         const navigate = this.props.navigation.navigate
//         es6 语法糖，单个变量声明体现不出优势，多个变量可以少写一些代码。
        return (
            <TouchableHighlight
                              onPress={() =>navigate('ItemDetail', { title: '详情页',des:'点击我返回' })} >
            <View style={UserItemStyle.container_out} >
                    <Image style={UserItemStyle.image_UserAvatar} source={{uri: rowData.avatar_url}}/>
                    <View style={UserItemStyle.container_right}>
                        <Text style={UserItemStyle.text_UserID}>{rowData.id}</Text>
                        <Text style={UserItemStyle.text_UserType}>{rowData.login}</Text>
                    </View>

            </View>
            </TouchableHighlight>
        )
    }

    _renderSeparator() {
        var style = {
            height: 1,
            backgroundColor: "#CCCCCC"
        }
        return <View style={style}/>
    }
    _onPress() {
        // const {navigator}=this.props;
        // if(navigator){
        //     navigator.push({
        //         name:'ItemDetail',
        //         component: ItemDetail,
        //     })
        // }

        // this.props.navigation.navigate("ItemDetail",{"name":"张三","age":"18"})
        // this.props.navigator.push({
        //     title: "detail",
        //     component: ItemDetail,
        //     passProps: {
        //         name:123
        //     }
        // })
    }
}

const UserItemStyle = StyleSheet.create({
    container_out: {
        backgroundColor: "white",
        height: 100,
        width: 1000,
        flexDirection: "row",
        alignItems: "center"
    },
    container_right: {
        flexDirection: "column",
        height: 80,
        flexGrow: 1,
    },
    image_UserAvatar: {
        borderRadius: 80,
        width: 80,
        height: 80,
        resizeMode: "cover",
        marginHorizontal: 12
    },
    text_UserID: {
        color: "black",
        fontSize: 16,
        lineHeight: 24,
    },
    text_UserType: {
        color: "gray",
        fontSize: 12,
        lineHeight: 20,
    },
})